<template>
  <div class="top-title">基础信息</div>

  <el-tabs @tab-change="handleChangeTab">
    <el-tab-pane v-for="(tab, index) in state.tabsList" :label="tab.label" :key="index">
      <div class="base-info-box">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo left-spacing"
          action="#"
          multiple
          :http-request="uploadFile"
          :show-file-list="false"
        >
          <el-button type="primary">导入参数文件</el-button>
        </el-upload>
        <!-- <el-button type="primary">导入参数文件</el-button> -->
        <div class="base-info-list" v-if="tab.label != '闸门参数信息'">
          <dynamicTable :table-data="state.tableData" :table-headers="state.tableHeaders" />
          <!-- <el-table border :data="state.baseData" style="width: 100%" height="100%">
            <el-table-column prop="pmKey" label="参数名称" align="center" />
            <el-table-column prop="pmVl" label="参数值" align="center" />
          </el-table> -->
        </div>
        <div class="base-info-list" v-else>
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="闸门参数" name="first">
              <dynamicTable
                :table-data="state.gateTableData"
                :table-headers="state.gateTableHeaders"
              />
            </el-tab-pane>
            <el-tab-pane label="闸门泄流能力曲线参数" name="second">
              <dynamicTable
                :table-data="state.matrixTableData"
                :table-headers="state.matrixTableHeaders"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
  <!-- <div class="top-title">水库基础参数信息</div> -->

  <div class="top-title">优化调度方案</div>
  <div class="peizhi">
    <div v-if="newConfig == 0">
      <span>参数配置方案</span>
      <el-select v-model="state.paramsItem" class="m-2" placeholder="请选择" @change="handleChange">
        <el-option
          v-for="item in state.paramsData"
          :key="item.id"
          :label="item.scName"
          :value="item.id"
        />
      </el-select>
    </div>
    <div style="display: flex; align-items: center" v-else>
      <span class="config-title">参数配置方案</span>
      <el-input type="primary" v-model="newConfigName"></el-input>
    </div>
    <div class="btn">
      <el-button type="primary" class="btn-pading" @click="handleCreated" v-if="newConfig == 0"
        >新建</el-button
      >
      <el-button type="primary" class="btn-pading" @click="handleClosed" v-else>取消</el-button>
      <el-button type="success" class="btn-pading" @click="handleEditParams" v-if="newConfig == 0"
        >编辑</el-button
      >
      <el-button type="success" class="btn-pading" @click="saveConfig" v-if="newConfig != 0"
        >保存</el-button
      >
      <el-upload
        v-model:file-list="fileList"
        class="upload-demo left-spacing"
        action="#"
        multiple
        :http-request="uploadSchemeFile"
        :show-file-list="false"
      >
        <el-button type="danger">导入参数文件</el-button>
      </el-upload>
    </div>
  </div>
  <div class="bottom-table">
    <el-table border :data="state.regulationData" style="width: 100%" height="100%">
      <el-table-column prop="pmKey" label="参数名称" align="center" />
      <el-table-column prop="pmVl" label="参数值" align="center" />
    </el-table>
  </div>
</template>

<script setup>
import {
  // 查看调度规程方案
  getOptimSchemes,
  // 查询调度规程内容
  getOptimParams,
  // 查询预报断面基础信息
  getForecastSectionInfo,
  //上传水库参数文件
  uploadResvParams,
  //保存规程
  saveOptimSchemes,
  //上传规程
  uploadResvOptimParams
} from '@/services/modules/model-config'
import dynamicTable from '@/components/app-publicui/dynamic-table.vue'
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
const newConfig = ref(0)
const newConfigName = ref('')
const activeName = ref('first')
const state = reactive({
  matrixTableData: [],
  gateTableData: [],
  matrixTableHeaders: [],
  gateTableHeaders: [],
  tableData: [],
  tableHeaders: [],
  schemeId: '',
  tabsList: [
    {
      label: '基础参数信息'
    },
    {
      label: '条件参数信息'
    },
    {
      label: '演进参数信息'
    },
    {
      label: '闸门参数信息'
    },
    {
      label: '底孔参数信息'
    },
    {
      label: '水位库容关系曲线'
    },
    {
      label: '水位泄流关系曲线'
    }
  ],
  scName: '',
  typeFlag: 1,
  // 基础信息，参数信息
  baseData: [],
  // 底部列表数据
  regulationData: [],
  // 参数配置方案
  paramsData: [],
  // 选择的参数配置方案
  paramsItem: ''
})
const props = defineProps({
  // 点击断面 水库的信息
  sectionObj: {
    type: Object,
    default: () => {}
  },
  // 模型信息
  modelobj: {
    type: Object,
    default: () => {}
  }
})
watch(
  () => {
    props.sectionObj.blkcd
  },
  () => {
    state.paramsItem = ''
    state.regulationData = []
    // 查询规程方案
    acceptRegsSchemes()
    // 查询预报断面基础信息
    acceptForecastSectionInfo()
    // 调度规划内容
    acceptRegsRegsRules('')
  },
  {
    deep: true
  }
)
//新建配置
function handleCreated() {
  newConfig.value = 1
  state.scName = ''
  state.paramsItem = ''
  newConfigName.value = ''
}
//取消配置
function handleClosed() {
  newConfig.value = 0
}
//编辑配置
function handleEditParams() {
  newConfig.value = 1
  newConfigName.value = state.scName
}
//保存配置
function saveConfig() {
  let params = {}
  if (state.paramsItem) {
    params = {
      scName: newConfigName.value,
      mid: props.modelobj.id,
      blkcd: props.sectionObj.blkcd,
      id: state.paramsItem
    }
  } else {
    params = {
      scName: newConfigName.value,
      mid: props.modelobj.id,
      blkcd: props.sectionObj.blkcd
    }
  }
  saveOptimSchemes(params).then((res) => {
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: res.msg
      })
      newConfig.value = 0
      acceptRegsSchemes()
    }
  })
}
//导入水库基本信息
async function uploadFile(params) {
  let { file } = params
  let formData = new FormData()
  formData.append('file', file)
  formData.append('type', Number(state.typeFlag))
  formData.append('blkcd', props.sectionObj.blkcd)
  let res = await uploadResvParams(formData)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    acceptForecastSectionInfo()
  }
}

//导入水库基本信息
async function uploadSchemeFile(params) {
  let { file } = params
  let formData = new FormData()
  formData.append('file', file)
  formData.append('scid', Number(state.paramsItem))
  formData.append('blkcd', props.sectionObj.blkcd)
  let res = await uploadResvOptimParams(formData)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    acceptRegsRegsRules(state.paramsItem)
  }
}
//点击tabs
const handleChangeTab = (val) => {
  state.typeFlag = Number(val) + 1
  acceptForecastSectionInfo()
}
// 配置方案
const acceptRegsSchemes = () => {
  getOptimSchemes({
    blkcd: props.sectionObj.blkcd,
    mid: props.modelobj.id
  }).then((res) => {
    if (res.code == 200) {
      state.paramsData = res.data
      // 默认选中第一个配置方案
      handleChange(res.data[0].id)
      // 选择的参数配置方案
      state.paramsItem = res.data[0].id
    }
  })
}
// 调度规划内容
const acceptRegsRegsRules = (val) => {
  getOptimParams({ scid: val, blkcd: props.sectionObj.blkcd }).then((res) => {
    if (res.code == 200) {
      state.regulationData = res.data
    }
  })
}
// 查询预报断面基础信息
const acceptForecastSectionInfo = () => {
  state.baseData = {}
  if (state.typeFlag == 4) {
    getForecastSectionInfo({
      blkcd: props.sectionObj.blkcd,
      type: 4
    }).then((res) => {
      if (res.code == 200) {
        state.baseData = res.data
        state.gateTableHeaders = state.baseData.title
        state.gateTableData = state.baseData.val
      }
    })
    getForecastSectionInfo({
      blkcd: props.sectionObj.blkcd,
      type: 8
    }).then((res) => {
      if (res.code == 200) {
        state.baseData = res.data
        state.matrixTableHeaders = state.baseData.title
        state.matrixTableData = state.baseData.val
      }
    })
  } else {
    getForecastSectionInfo({
      blkcd: props.sectionObj.blkcd,
      type: state.typeFlag
    }).then((res) => {
      if (res.code == 200) {
        state.baseData = res.data
        state.tableHeaders = state.baseData.title
        state.tableData = state.baseData.val
      }
    })
  }
}
// 选择参数配置方案
const handleChange = (val) => {
  let arr = state.paramsData.filter((item) => {
    return item.id == val
  })
  state.schemeId = val
  state.scName = arr[0].scName
  acceptRegsRegsRules(val)
}
</script>

<style lang="less" scoped>
.top-title {
  padding-left: 10px;
  margin: 20px 0 10px 0;
  color: #409eff;
}
.el-tabs {
  margin-left: 10px;
}
.base-info-box {
  height: 300px;
  // position: relative;
  :deep(.el-upload) {
    float: right;
    margin-right: 30px;
    margin-bottom: 10px;
  }
  .base-info-list {
    // padding: 0 10px;
    margin-top: 10px;
    height: 250px;
    :deep(.demo-tabs) {
      height: 220px;
      .el-tabs__header {
        pointer-events: none;
        .el-tabs__nav-wrap {
          pointer-events: auto;
        }
      }
      .el-tabs__content {
        height: 100%;
        .el-tab-pane {
          height: 100%;
          overflow-y: auto;
        }
      }
    }
  }
}

.bottom-table {
  padding: 0 10px;
  margin-top: 10px;
  height: calc(100% - 620px);
}
.peizhi {
  margin: 20px 0 20px 10px;
  display: flex;
  color: #797979;
  justify-content: space-between;
}
.config-title {
  width: 150px;
}
.m-2 {
  margin-left: 20px;
}

.btn {
  margin-right: 20px;
  display: flex;
  :deep(.el-button) {
    margin-right: 15px;
  }
}
</style>
